<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽限制范围</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            /* relative 不脱离文档流 */
            /* absolute fixed 脱离文档流 */
        }
    </style>
</head>

<body style="height: 3000px;">
    <div class="box">
        简单快捷萨芬还是根据广东省高级
    </div>
    <script>
        // offsetX\Y 距离元素距离  pageX\Y 距离文档距离
        var oBox = document.querySelector('.box');
        var w = (document.body.clientWidth || document.documentElement.clientWidth) - oBox.clientWidth;
        var h = (document.body.clientHeight || document.documentElement.clientHeight) - oBox.clientHeight;
        console.log(h);
        // filter: alpha(opacity: 0)
        oBox.onmousedown = function(e) {
            var ev = e || event;
            var disX = ev.offsetX;
            var disY = ev.offsetY;
            document.onmousemove = function(e) {
                var ev = e || event;
                var l = ev.clientX - disX;
                var t = ev.clientY - disY;
                l = l < 0 ? 0 : (l > w ? w : l);
                t = t < 0 ? 0 : (t > h ? h : t);
                oBox.style.left = l + 'px';
                oBox.style.top = t + 'px';
            }
            document.onmouseup = function() {
                document.onmousemove = document.onmouseup = null;
            }
            ev.paeventDefault = ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        }

























        //最远范围  页面可视区宽度(高)-盒子本身宽度(高);
        // var scr = 0;
        // window.onscroll = function() {
        //     scr = document.body.scrollTop || document.documentElement.scrollTop;
        //     console.log(scr);
        // }
        // var w = clientW - oBox.offsetWidth + scr;
        // var h = clientH - oBox.offsetHeight;
        // var l = 0,
        //     t = 0;
        // oBox.style.left = parseInt(localStorage.getItem('l')) + 'px';
        // oBox.style.top = parseInt(localStorage.getItem('t')) + 'px';
        // oBox.onmousedown = function(e) {
        //     //IE windown.event;
        //     // e 高版本
        //     var ev = e || event;
        //     // 求 鼠标按下点离当前元素（oBox）的距离
        //     var disX = ev.offsetX;  
        //     var disY = ev.offsetY;
        //     document.onmousemove = function(e) {
        //         var ev = e || event;
        //         //求 left 和 top 值
        //         //left = 不断变化的鼠标坐标-蓝线的距离（disX）
        //         l = ev.pageX - disX;
        //         //左边界
        //         if (l < 0) {
        //             l = 0
        //         }
        //         if (l > w) {
        //             l = w;
        //         }
        //         t = ev.pageY - disY;
        //         // 上边界
        //         if (t < 0) {
        //             t = 0
        //         }
        //         if (t > h) {
        //             t = h
        //         }
        //         //设置块的 left top值
        //         oBox.style.left = l + 'px';
        //         oBox.style.top = t + 'px';
        //     };
        //     //抬起之后，清除事件
        //     document.onmouseup = function() {
        //         localStorage.setItem('l', l);
        //         localStorage.setItem('t', t);
        //         document.onmousemove = null;
        //     };
        //     //取消默认行为
        //     // ev.preventDefault 高版本
        //     // returnValue = true IE
        //     ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        // };
    </script>
</body>

</html>